<template>
  <!-- 用户管理 -->
  <div>
    <!-- 页面标题 -->
    <div id="user-management-title">
      <h1 style="margin-left:50px">用户管理</h1>
    </div>

    <!-- 筛选条件 -->
    <div id="user-management-select-div">
      <div class="user-management-select-top">
        <i class="el-icon-set-up" style="margin-left:50px"></i>&nbsp;&nbsp;搜索
      </div>
      <div id="user-management-select-bottom">
        <el-input
          v-model="formInline.name"
          placeholder="输入用户姓名"
          style="width: 200px;margin-left:50px;float:left"
        ></el-input>
        <el-input
          v-model="formInline.username"
          placeholder="输入账号"
          style="width: 200px;margin-left:50px;float:left"
        ></el-input>
        <el-date-picker
          v-model="formInline.join_time"
          type="datetime"
          placeholder="注册日期"
          style="float:left;width:200px;margin-left:50px"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        <div style="height:100%;float:left;margin-left:30px">
          <el-button type="primary" @click="getdata()">搜索</el-button>
          <el-button type="info" @click="reset()">重置</el-button>
        </div>
      </div>
    </div>

    <!-- 用户列表 -->
    <div id="user-management-listdiv">
      <div class="user-management-select-top">
        <i class="el-icon-tickets" style="margin-left:50px"></i
        >&nbsp;&nbsp;用户列表
      </div>
      <!-- 条目展示 -->
      <div id="user-management-userlistdiv">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @sort-change="sortChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="200">
          </el-table-column>
          <el-table-column prop="name" label="用户姓名" width="200">
          </el-table-column>
          <el-table-column prop="telphone" label="电话" width="200">
          </el-table-column>
          <el-table-column prop="status" label="启用状态" width="200">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status == '1' ? yvalue : nvalue"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="statusSwitch(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="join_time" label="加入时间" width="200">
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="400">
            <template slot-scope="scope">
              <el-button size="mini" @click="findByRecord(scope.row)"
                >家庭档案</el-button
              >
              <el-button size="mini" @click="findByAddress(scope.row)"
                >收货地址</el-button
              >
              <el-button size="mini" type="danger" @click="deleteOne(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleCheckFamilyfile(scope.row.id)">家庭档案</el-button>
              <el-button size="mini"
                         @click="handleCheckDelivery(scope.row.id)">收货地址</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.row.id,scope.$index)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页组件 -->
        <Pagination
          v-bind:child-msg="pageparm"
          @callFather="callFather"
          align="center"
        ></Pagination>
      </div>

      <!-- 全选、批量删除、页码 -->
      <div style="height:60px;" >
        <div id="user-management-deletealldiv" style="float: left;">
          <el-button
            type="danger"
            size="large"
            :disabled="batchDeleteArr.length === 0"
            @click="deleteSome(batchDeleteArr)"
            >批量删除</el-button>
        </div>
        <div id="user-management-deletealldiv">
          <el-button
            type="primary"
            size="large"
            :disabled="batchDeleteArr.length === 0"
            @click="sendSome(batchDeleteArr)"
            >群发短信</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/user-management/Pagination";
import axios from "axios";
export default {
  data() {
    return {
      editForm: {
        id: "",
        username: "",
        name: "",
        telphone: "",
        gender: "",
        security_card: "",
        birthday: "",
        address: "",
        id_card_num: "",
        status: "",
        symptom: "",
        sid: "",
        join_time: "",
        is_delete: "",
        create_time: "",
        update_time: ""
      },
      //搜索框数据
      formInline: {
        username: "",
        name: "",
        join_time: ""
      },
      //复选框参数数组(id)
      batchDeleteArr: [],
      //复选框参数数组(telphone)
      batchSendArr: [],
      //分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      yvalue: true, //switch开
      nvalue: false, //switch关
      //筛选
      accountsearch: "",
      selectdate: "",
      //列表
      multipleSelection: [],
      tableData: [],
      //排序字段
      orderSort: "",
      orderKey: ""
    };
  },

  // 注册组件
  components: {
    Pagination,
  },

  created() {
    //列表内容请求
    this.requestuser();
  },
  methods: {
    //请求用户条目
    requestuser() {
      this.$axios
        .get(
           "/user/findAll/" +
            this.pageparm.currentPage +
            "/" +
            this.pageparm.pageSize
        )
        .then(res => {
          console.log(res.data.data);

          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.pageparm.total = res.data.data.total;
          }
        })
        .catch();
    },
    //按照条件搜索
    getdata() {
      let queryEntity = {
        currentPage: this.pageparm.currentPage,
        pageSize: this.pageparm.pageSize,
        entity: this.formInline,
        orderSort: this.orderSort,
        orderKey: this.orderKey
      };
      console.log(this.pageparm.currentPage)
      console.log(this.formInline)
      this.$axios
        .post( "/user/findByCondition/", queryEntity)
        .then(res => {
          console.log(res.data.data);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.pageparm.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.msg,
              type: "info"
            });
          }
        })
        .catch(error => {
          this.$message.error("操作失败，请稍后再试!");
        });
    },

    //重置搜索内容
    reset() {
      this.formInline.name = "";
      this.formInline.username = "";
      this.formInline.join_time = "";
      this.requestuser();
    },
    changeSize(val) {
      this.pageparm.pageSize = val;
      this.pageparm.currentPage = 1;
      // 重新调用获取数据方法
      this.requestuser();
    },
    changeCurrent(val) {
      this.pageparm.currentPage = val;
      // 重新调用获取数据方法
      this.requestuser();
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.requestuser();
    },
    //排序方法
    sortChange(column) {
      if (column.order == "ascending") {
        this.orderSort = "asc";
      } else if (column.order == "descending") {
        this.orderSort = "desc";
      } else {
        this.orderSort = "";
      }
      this.orderKey = column.prop;
      this.requestuser();
    },
    //复选框选中的数据数组，把选中得元素的id赋予batchDeleteArr数组中
    handleSelectionChange(val) {
      this.batchDeleteArr = [];
      this.batchSendArr=[];
      for (let index in val) {
        this.batchDeleteArr[index] = val[index].id;
      }
      for(let index in val){
        this.batchSendArr[index]=val[index].telphone;
      }
    },
    

    // 删除单行数据
    deleteOne(row) {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/user/deleteOne/" + row.id)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
                //同时刷新数据
                this.requestuser();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "info"
                });
              }
            })
            .catch(error => {
              this.message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            message: "已取消删除",
            type: "info"
          });
        });
    },

    //批量删除
    deleteSome() {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/user/deleteSome", this.batchDeleteArr)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "info"
                });
                //同时刷新数据
                this.requestuser();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "info"
                });
              }
            })
            .catch(error => {
              this.$message.error("删除失败，请稍后再试");
            });
        })
        .catch(() => {
          this.$message({
            message: "已取消删除"
          });
        });
    },
//群发短信
sendSome(){
  this.$confirm("确定要发送信息给选中的用户吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/user/send", this.batchSendArr)
            .then(res => {
              console.log(this.batchSendArr)
              if (res.data.code == 200) {
                this.$message({
                  message: "发送成功",
                  type: "info"
                });
                //同时刷新数据
                this.requestuser();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "info"
                });
              }
            })
            .catch(error => {
              this.$message.error("发送失败，请稍后再试");
            });
        })
        .catch(() => {
          this.$message({
            message: "已取消发送"
          });
        });
},
    //筛选
    search() {
      this.currentpage = 1;
      this.requestuser();
    },
    //全选、反选功能
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //查看家庭档案
    findByRecord(row) {
      this.$router.push("/index/family-file/" + row.id);
      document.documentElement.scrollTop = 0;
    },
    //查看收货地址
    findByAddress(row) {
      this.$router.push("/index/delivery-message/" + row.id);
      document.documentElement.scrollTop = 0;
    },
    //删除行信息
    handleDelete(id) {
      console.log("deletebyid:" + id);
      this.deleteuser(id);
    },

    //状态码前端渲染
    statusSwitch(row) {
      let obj = row;
      obj.status = 1 - row.status;
      this.$axios
        .post("/user/updateStatus/", obj)
        .then(res => {
          if (res.data.code == 200) {
            this.requestuser();
            this.$message({
              message: "操作成功",
              type: "info"
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "info"
            });
          }
        })
        .catch(error => {
          this.requestuser();
          this.message.error("操作失败，请稍后再试");
        });
    }

    // //状态码
    // statusSwitch(row) {
    //   this.$axios({
    //     method: "get",
    //     url: "/user-management/statusChange",
    //     params: {
    //       id: row.id,
    //       status: row.status
    //     }
    //   });
    //   this.$message({
    //     message: "更新成功",
    //     type: "success"
    //   });
    // }
  }
};
</script>
<style scoped>
* {
  /* border: 1px solid red; */
  border-radius: 3px;
}
/* 页面标题 */
#user-management-title {
  margin-left: 50px;
  margin-right: 50px;
  height: 60px;
}
/* 筛选条件 */
#user-management-select-div {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 10px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.user-management-select-top {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  line-height: 50px;
  font-size: 20px;
}
.el-icon-set-up {
  font-size: 30px;
  margin-top: 10px;
}
#user-management-select-bottom {
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
}
/* 用户列表 */
#user-management-listdiv {
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.el-icon-tickets {
  font-size: 30px;
  margin-top: 10px;
}
#user-management-userlistdiv {
  overflow: hidden;
}
/* 批量删除 */
#user-management-deletealldiv {
  width: 100px;
  height: 50px;
  float: left;
  margin-left: 50px;
  margin-top: 10px;
}
/* 分页 */
#user-management-pagediv {
  height: 50px;
  float: left;
  margin-left: 200px;
  margin-top: 10px;
}
</style>
